Css

Pure CSS3 implementation arc (circle) percentage animation progress bar

Pure CSS3 implementation arc (circle) percentage animation progress bar, someone asked me to explain?
By:
Css

The code is based on CSS3 's clip, transform, and animation, so you need to know exactly what these attributes are for the purpose of understanding the CSS principle.

Create a css file and named it as style.css and  paste the following code.

CSS CODE:

.wrapper {
    width: 100px; /* Set the size of the progress bar */
    height: 100px;
    position: absolute; /* Enable clipping */
    clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
    width: 80px;
    height: 80px;
    border: 10px solid green;
    border-radius: 50px;
    position: absolute;
    clip: rect(0px, 50px, 100px, 0px);
}
 
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
    -webkit-animation-iteration-count: 1; /* Only run once */
    -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
    -webkit-animation-timing-function: linear; /* Linear animation */
}
 
.wrapper[data-anim~=wrapper] {
    -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
    -webkit-animation-delay: 3s; /* Wait half of the animation */
    -webkit-animation-name: close-wrapper; /* Keyframes name */
}
 
.circle[data-anim~=left] {
    -webkit-animation-duration: 6s; /* Full animation time */
    -webkit-animation-name: left-spin;
}
 
.circle[data-anim~=right] {
    -webkit-animation-duration: 3s; /* Half animation time */
    -webkit-animation-name: right-spin;
}
 
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
    from {
        -webkit-transform: rotate(0deg);
    }
 
    to {
        -webkit-transform: rotate(180deg);
    }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
    from {
        -webkit-transform: rotate(0deg);
    }
 
    to {
        -webkit-transform: rotate(360deg);
    }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
    to {
        clip: rect(auto, auto, auto, auto);
    }

HTML CODE:

Refer the style.css to the page.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pure CSS for circular animation</title>
    <link href="~/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="wrapper" data-anim="base wrapper">
        <div class="circle" data-anim="base left"></div>
        <div class="circle" data-anim="base right"></div>
    </div>
</body>
</html>

Operation:

First of all: define three animations, the first is the outermost layer, let him only show half, then run 3s, while the right side runs 3s, from 0 to 180 degrees.

Then: After 180 degrees, release the display half of the outer layer and let him automatically display the other. Then stop the animation on the right and stop there.

Finally: the left side is on the original basis (3s running the same as the right side, also rotated 180 degrees) and then continues to rotate 180 degrees.

 

Related Article

Post your comments / questions



Recent Article